<template>
  <!-- 专辑头部部分-->
    <el-row>
        <el-col :span="5">
            <ItemImg :image-detail="imageDetail"/>
        </el-col>
        <el-col :span="18" :offset="1">
            <div>
                <div class="list-title">{{ details.name }}</div>
                <div class="list-creator">{{ details.type }} by
                    <router-link :to="{
                        name:'singer-detail',
                        params:{
                            id:details.artist.id
                        }
                    }">{{ details.artist.name }}
                    </router-link>
                </div>
                <div class="list-update-time">
                    发行于{{ timestampToTime(details.publishTime) }}·{{ details.songNum }}首歌
                </div>
                <div class="list-des">
                    {{ details.description }}
                </div>
            </div>
            <!-- 播放按钮部分-->
            <div class="song-list-fun">
                <div class="song-list-play">
                    <font-awesome-icon icon="fas fa-play" class="play-count-icon"/>
                    <span>播放</span>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import ItemImg from "@/minicomponents/ItemImg.vue";
import {timestampToTime} from "@/http/tools";

export default {
    name: "AlbumListDetailHeader",
    methods: {timestampToTime},
    components: {ItemImg},
    props: ['details'],
    data() {
        return {
            // details: {
            //     albumId: 163506708,
            //     name: 'On Me',
            //     titleImg: 'https://p2.music.126.net/uzvtVVLNowE60ngZXqOYqA==/109951168539720299.jpg',
            //     artist: {
            //         name: "EPTEND",
            //         id: 13837118,
            //     },
            //     company: {
            //         name: 'Capitol Records UK / EMI',
            //         id: ''
            //     },
            //     publishTime: '1681228800000',
            //     songNum: 1,
            //     description: 'Written by EPTEND\nProduced by 1Lonzo, EPTEND\nArranged by 1Lonzo\n\nMix/Master Engineer. 김진환\n\nPhotography. 정수빈\n',
            //     type: 'Single'
            // }
        }
    },
    computed: {
        imageDetail() {
            return {
                picUrl: this.details.titleImg,
                isShowInfo: false,
                isRound: false,
                playCount: 0,
                hasPlayIcon: true
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "../assets/less/common";

@fontSize: .8vw;

.el-row {
  cursor: default;
}

.list-title {
  font-size: 1.7vw;
  font-weight: bolder;
  margin: 1vw 0;
}

.list-creator {
  font-size: .9vw;
  font-weight: 400;

  a:hover {
    text-decoration: underline;
  }
}

.list-update-time {
  font-size: @fontSize;
  //color: @metaphorFont;
  font-weight: 300;
}

.list-des {
  font-size: @fontSize;
  margin-top: 1.3vw;
  font-weight: 300;
  height: 3.3vw;
  /*多行文字溢出显示省略号*/
  overflow: hidden;
  text-overflow: ellipsis;
  /*弹性盒子模型显示*/
  display: -webkit-box;
  /*限制在一个块元素内显示文本的行数*/
  -webkit-line-clamp: 3;
  /*设置或检索伸缩盒对象的子元素的排列方式*/
  -webkit-box-orient: vertical;
}

.song-list-fun {
  margin-top: 1.5vw;
  height: 2.5vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .song-list-play {
    color: @mainColor;
    font-size: .9vw;
    font-weight: 700;
    background-color: @bgColor;
    padding: .5vw .8vw;
    border-radius: .5vw;
    cursor: pointer;
    transition: all .2s ease;

    > span {
      margin-left: .4vw;
    }

    //&:hover {
    //  font-size: 1vw;
    //}
  }
}
</style>